<template>
    <div class="words-item">
        <div class="flex items-center justify-between words-item__title font-bold text-14px">
            <div>
                前置词
            </div>
            <el-button type="primary" size="small" @click="handleAdd">
                添加
            </el-button>
        </div>
        <div class="pl-16px pr-16px pt-16px pb-16px h-350px overflow-hidden words-item__list">
            <el-scrollbar>
                <el-checkbox-group v-model="selectedKeywords">
                    <el-checkbox :value="keyword.label" v-for="(keyword, index) in keywords" :key="index">
                        <div class="flex custom-input active">
                            <el-input v-model="keyword.label" clearable placeholder="请输入关键词" @input="(val) => handleInput(val, index)"></el-input>
                            <el-button v-if="keyword.label" type="danger" :icon="Delete" @click="(evt) => handleDelete(keyword, index)" class="ml-8px"></el-button>
                        </div>
                    </el-checkbox>
                </el-checkbox-group>
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup lang="ts">
import { validateStringAllErrors } from '@/utils/index'
import { confirmMessageBox } from '@/utils/elMessageBox'
import { CircleCloseFilled, Delete, WarningFilled } from '@element-plus/icons-vue'

const props = defineProps<{
    ruleForm: any;
}>()

const state = reactive({
    activeIndex: -1,
    keyIndex: <number[]>[]
})

const keywords = computed(() => {
    return props.ruleForm.frontWords
})

const selectedKeywords = ref<string[]>([])

// 初始化时设置默认选中项
onMounted(() => {
    selectedKeywords.value = props.ruleForm.frontWords
        .filter((item: any) => item.value === 1 || item.value === 2)
        .map((item: any) => item.label);
})

watch(selectedKeywords, (newVal) => {
    props.ruleForm.frontWords.forEach((item:any) => {
        if (newVal.includes(item.label) && !item.value) {
            item.value = 1
        }else if (!newVal.includes(item.label) && item.value === 1) {
            item.value = 0
        }
    })
}, { deep: true })

function handleInput(value: any, index: number) {
    //检测字符串字符串不能为空、字符串不能包含“医用”、“医疗器械”、“手术器械”、字符串不能超过100字、字符串不能含有特殊字符 
    const result = validateStringAllErrors(value.label)
    if (Array.isArray(result) && result.length > 0) {
        ElMessage.error(result[0])
    }
}
function handleDelete(value: any, index: number) {
    confirmMessageBox(WarningFilled, '您确定要删除这条前置词吗？', '', '', () => {
        const labelToRemove = keywords.value[index].label
        // 1. 从 selectedKeywords 移除
        selectedKeywords.value = selectedKeywords.value.filter(item => item !== labelToRemove)
        // 2. 从 frontWords 数组中移除对应对象
        props.ruleForm.frontWords.splice(index, 1)
        let i = state.keyIndex.indexOf(index);
        if (i !== -1) {
            state.keyIndex.splice(i, 1);
        }
    })
}
function handleBlur(value: any, index: number) {
    const result = validateStringAllErrors(value.label)
    if (Array.isArray(result) && result.length > 0) {
        ElMessage.error(result[0])
    }
}

function handleAdd() {
    if (state.keyIndex.length < 10) {
        //新增并获取焦点
        props.ruleForm.frontWords.push({
            label: '',
            value: 2
        })

        nextTick(() => {
            const id = props.ruleForm.frontWords.length - 1
            const elementId = 'front-input-' + id;
            const element = document.getElementById(elementId);
            state.activeIndex = id
            state.keyIndex.push(id)
            if (element) {
                element.focus();
            }
        });
    } else {
        confirmMessageBox(CircleCloseFilled, `添加前置词不得超过10个`)
    }

}

</script>

<style lang="scss" scoped>
:deep(.el-checkbox__label) {
    width: 90%;
}

:deep(.el-checkbox) {
    margin-right: 0 !important;
}
:deep(.el-input){
    height: 28px;
}
:deep(.el-button--danger){
    height: 28px;
    padding-left: 8px;
    padding-right: 8px;
}
</style>